import isObject from 'lodash/isObject'

let _run = false

const watermark = {
  set: function (str) {
    if (_run) { return false }
    let title, desc
    if (isObject(str)) {
      title = str.title
      desc = str.desc
    } else {
      desc = str
    }
    if (!title) return
    var canvas = document.createElement('canvas')
    canvas.width = 400
    canvas.height = 200
    canvas.style.display = 'none'
    var shuiyin = canvas.getContext('2d')
    // 控制文字的旋转角度和上下位置
    shuiyin.rotate((-20 * Math.PI) / 180)
    shuiyin.translate(-50, 20)
    //文字颜色
    // shuiyin.fillStyle = "#f5f5f5";
    shuiyin.fillStyle = 'rgba(200, 200, 200, 0.40)'
    //文字样式
    // shuiyin.font = "100 16px Microsoft JhengHei ";
    shuiyin.font = '18px Vedana'
    shuiyin.fillText(title, canvas.width / 3, canvas.height / 2)
    desc && shuiyin.fillText(desc, canvas.width / 3, canvas.height / 2 + 20)
    /* 新建一个用于填充canvas水印的标签，之所以没有直接在body上添加，
           是因为z-index对个别内容影响，才考虑的不用body */
    var watermark = document.createElement('div')
    const styleStr = `
            position:fixed;
            top:0;
            left:0;
            width:100vw;
            height:100vh;
            z-index:99;
            pointer-events:none;
            background-repeat:repeat;
            mix-blend-mode: multiply;
            background-image:url('${canvas.toDataURL('image/png')}')`
    watermark.setAttribute('style', styleStr)
    watermark.classList.add('watermark')
    document.body.appendChild(watermark)

    //此方法是防止用户通过控制台修改样式去除水印效果
    /* MutationObserver 是一个可以监听DOM结构变化的接口。 */
    const observer = new MutationObserver(() => {
      const wmInstance = document.querySelector('.watermark')
      if ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) {
        //如果标签在，只修改了属性，重新赋值属性
        if (wmInstance) {
          // 避免一直触发
          // observer.disconnect();
          // console.log('水印属性修改了');
          wmInstance.setAttribute('style', styleStr)
        } else {
          //标签被移除，重新添加标签
          document.body.appendChild(watermark)
        }
      }
    })
    observer.observe(document.body, {
      attributes: true,
      subtree: true,
      childList: true,
    })
    _run = true
  },
  close: function () {
    /* 关闭页面的水印，即要移除水印标签 */
    let watermark = document.querySelector('.watermark')
    document.body.removeChild(watermark)
  },
}
export default watermark
